<template>
  <div class="">
    <el-form
      :inline="true"
      :model="form"
      :disabled="loading"
      ref="refForm"
      label-width="160px"
      class="filter-container">
      <div class="text-info">
        <div class="text-info-title">返水固定发放时间</div>
        <div class="text-info-detail">
          <span>每日15：00发放</span>
          <span>*计算发放为上一天的返水</span>
        </div>
        <div class="text-info-title">AG真人/eBET真人/小金真人 每日返水金额上限</div>
        <div class="text-info-detail">
          <el-input v-model="limitAmount" :rules="limitAmountRule"></el-input>
          <el-tip>备注：三个真人游戏平台总返水上限</el-tip>
        </div>
      </div>
      <el-card v-for="(item,key) in form.tableData" :key="item.gameType">
        <div slot="header">
          {{transferGameName(item[0])}}
          <el-button style="float: right;padding: 3px 0" type="text" @click="add(item)">+增加条件配置
          </el-button>
        </div>
        <el-table
          ref="refTable"
          :data="item[1]"
          border>
          <el-table-column label="有效投注额(>=)" align="center">
            <template slot-scope="{row,$index}">
              <el-form-item>
                <el-input class="edit-input" size="small" v-model="item[1][$index].validRebateAmount" @keyup.enter.native="doSave({ action: 'saveForm', form: { name: 'refForm', scrollToError: true }})"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="返水比例(%)" min-width="120" align="center">
            <template slot-scope="{row,$index}">
              <el-form-item :prop="`tableData[${key}][1][${$index}].rebateRate`" :rules="rebateRate">
                <el-input class="edit-input" size="small" v-model.number="item[1][$index].rebateRate" @keyup.enter.native="doSave({ action: 'saveForm', form: { name: 'refForm', scrollToError: true }})"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="60" align="center">
            <template slot-scope="{row,$index}">
              <el-button type="text" @click="delStratified(item,$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <div>
        <el-button v-loading="loading" style="margin-left: 10px;" type="primary"
                   @click="doSave({ action: 'saveForm', form: { name: 'refForm', scrollToError: true }})">确定
        </el-button>
        <el-button v-loading="loading" style="margin-left: 10px;" type="primary" @click="refreshForm()">重置
        </el-button>
      </div>
    </el-form>


  </div>
</template>

<script>
  import {form, factory} from '@/build';

  import {
    getRebateList as detailApi,
    updateRebate as saveApi,
    deleteRebate as deleteApi,
  } from '@/services/api/activity'
  import ElTip from "@/components/Tip/index";

  export default {
    name: "rebate-config",
    components: {ElTip},
    mixins: [form],

    props: {
      value: Boolean,
      id: Number
    },

    data() {
      return {
        ptDigital: undefined,
        config: [],
        form: {
          tableData: [],
        },
        defaultData: consts.GAME_ID,
        rebateRate: factory.getRule('rate'),
        limitAmount: '',
        limitAmountRule: factory.getValidator('nonNegativeInteger'),
      }
    },
    computed: {},
    methods: {
      resetForm() {
        let self = this;
        this.tableData.map((item, index) => {
          self.$set(this.tableData, index, [item[0], []])
        })
      },
      transferGameName(gameType) {
        // return _.find(consts.PLATFORM_TYPE, {value: Number(gameType)}).title
        return _.find(consts.ACTIVITY_PLATFORM, {value: Number(gameType)}).title
      },
      delStratified(item, index) {
        item[1].splice(index, 1)
      },
      add(item) {
        item[1].push({gameType: Number(item[0])})
      },
      compareGameNum(data) {
        _.each(data && data.itemList||[], item => {
          item.rebateRate = _.formatMul(item.rebateRate, 100)
        });
        const gameList = _(consts.ACTIVITY_PLATFORM)
          .map('value') //[1,2,3,4,5,8,9]
          .map(gameType => {
            return [gameType, _.filter(data && data.itemList, {
              gameType:String(gameType)
            })]
          })
          .value();
        this.limitAmount = data.limitAmount;
        return {tableData: gameList}
      },
      checkRate() {

      },
      refreshForm(){
        this.resetForm('configForm');
        this.getAll()
      },
    },

    mounted() {
      //tab页记录访问日志
      this.$store.dispatch(types.SAVE_OPERATION_LOG, {content: _.getContent(this.$route, '活动配置', true)});
      this.bindGet(detailApi, 'form', {
        action: "getGird",
        format: (data) => this.compareGameNum(data)
      })
      this.doAction({type: 'get', action: 'getGird'})

      this.bindSave(saveApi, 'saveForm', 'tableData', {
        beforeSend: () => {
          let dataArr = []
          this.form.tableData.map((item, index) => {
            item[1].map(({gameType, gameName, id, rebateRate, validRebateAmount} = data) => {
              dataArr.push({gameType, gameName, id, rebateRate: _.formatDiv(rebateRate, 100,{fixed: 4}), validRebateAmount})
            })
          })
          return {itemList: dataArr, limitAmount: this.limitAmount}
        },
      });
    }
  }
</script>

<style lang="scss" scoped>
  .el-form-item {
  }

  .title {
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .label {
    padding-left: 100px;
    font-weight: 700;
  }

  .detail {
    padding-left: 100px;
  }

  .text-info{
    font-size: 14px;
    .text-info-title{
      margin-bottom: 10px;
    }
    .text-info-detail{
      color:#9c9ea2;
      margin-bottom: 10px;

      /deep/ input{
        width: 200px;
        margin-bottom: 10px;
      }
      span{
        font-size: 12px;
        margin-right: 20px;
      }
    }
  }

</style>
